<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<base class="_dcdev_preset_" href="https://res.dcdev.net/" />

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
        href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>数控开发 · 预览代码片段</title> <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <!------ 以上内容不要动 --------------------------------------------------------->


</head>

<body>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
    <!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写  ------>
    <div class="dcdev-body-container" id="dcdev_body_container" style="width:100%;">
        <!-- body start -->

        <div id="table_list" style="width: 100%;"></div>

        <!-- body end -->
    </div>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass"
    authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
    xhr_show_loading=1></script>
<!-- <script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/func/import_dev_kit.js"></script> -->
<script class="_dcdev_preset_">
    // 代码片段描述
    code_part_desc = "render_somthing的demo";
    code_part_id = "";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->

<script>
    $("#table_list").load("https://res.dcdev.net/dcdev/v1.0.6/assets/html/_render_somthing.html",
        "",
        function () {
            data = {
                // 容器div的id
                price: 0,
                id: "table_list",
                // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                direction: "y",
                // 多选配置
                check_config: {
                    // 单选 （none/single/multi）,默认none
                    mode: "multi",
                    enable: true,
                    // 选中状态配置
                    on_config: {
                        html: `<a style="color:red;">22</a>`,
                        // 选中回调
                        cb: function (res) {

                        },
                    },
                    // 未选中状态配置
                    off_config: {
                        html: `<a style="color:gray;">11</a>`,
                        // 取消选中回调
                        cb: function (res) {

                        },
                    }
                },
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "text-align: center;clear:both;",
                },
                // 每个li的配置
                li_config: {
                    /*
                        字段变量使用 # 而不是 $ 来定义
                        如需唯一标识某个node，则添加data-key以作区分
                        如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                    */
                    li_class: "",
                    li_style: "display:flex;margin:10px;    border-bottom: solid #dee2e6 1px;padding: 10px;",
                    li_html: {
                        // 如果不设置条件渲染，则使用默认的html代码渲染
                        default: {
                            html: `<div class="xx_card"><img src="/img/bookimg/5.jpg" style="height: 200px;"> <h6>微型计算机原理与接口技术</h6> <h6 style="color: rgb(255, 87, 34);">折扣价：<span style="font-size: 30px; color: red;">65</span>元</h6> <h6>分类：计算机</h6></div>`
                        },
                        /*
                            条件渲染--根据条件决定渲染时使用的html
                            field_value 字段与值作为渲染条件
                            field_field 字段与字段作为渲染条件
                        */
                        // condition条件渲染，bool==1时，我的发言，头像在右边
                        // condition: [{
                        //     expression: "^{ROW_INDEX} ==1",
                        //     html: `2`
                        // }, ],
                    }
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {},
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {},
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {},
                    // 所有数据加载完毕的回调
                    no_more: function (res) {},
                },
                data_config: {
                    data: [{
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "私人文件"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "公开文件"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "我的秘密"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "你的秘密"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "小姐姐"
                    }, {
                        img: "http://182.92.98.89:5280/img/files_icon/dir.png",
                        title: "其他"
                    }, ],
                },
            };
            new render_class().render(data, null, null)
        });
</script>


</html>